<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 左侧合同类型树 -->
      <el-col :span="6" :xs="24">
        <div class="head-container">
          <el-row :gutter="10" class="mb8">
            <el-col :span="18">
              <el-input
                v-model="typeNameKey"
                placeholder="请输入类型名称"
                clearable
                size="small"
                prefix-icon="el-icon-search"
              />
            </el-col>
            <el-col :span="6">
              <el-button
                type="info"
                plain
                icon="el-icon-sort"
                size="mini"
                @click="toggleExpandAll"
              >{{ isExpandAll ? '折叠' : '展开' }}</el-button>
            </el-col>
          </el-row>
        </div>
        <el-tree
          v-if="refreshTree"
          :data="typeOptions"
          :props="defaultProps"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          :default-expand-all="isExpandAll"
          ref="tree"
          highlight-current
          @node-click="handleNodeClick"
        />
      </el-col>
      <!-- 右侧提示词列表 -->
      <el-col :span="18" :xs="24">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
          <el-form-item label="提示词名称" prop="promptName">
            <el-input
              v-model="queryParams.promptName"
              placeholder="请输入提示词名称"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="版本号" prop="promptVersion">
            <el-input
              v-model="queryParams.promptVersion"
              placeholder="请输入版本号"
              clearable
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="提示词状态" clearable>
              <el-option
                v-for="dict in dict.type.sys_normal_disable"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="promptList">
          <el-table-column label="提示词名称" align="center" prop="promptName" />
          <el-table-column label="版本号" align="center" prop="promptVersion" />
          <el-table-column label="描述" align="center" prop="description" :show-overflow-tooltip="true"/>
          <el-table-column label="状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleViewContent(scope.row)"
                v-hasPermi="['system:contractPrompt:query']"
              >查看内容</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 查看提示词内容对话框 -->
    <el-dialog title="提示词内容" :visible.sync="contentOpen" width="780px" append-to-body>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="任务目标">
          <pre>{{ promptContent.taskObjective }}</pre>
        </el-descriptions-item>
        <el-descriptions-item label="输出格式">
          <pre>{{ promptContent.outputFormat }}</pre>
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="contentOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listContractType } from "@/api/system/contractType";
import { listContractPrompt, getPromptContent } from "@/api/system/contractPrompt";

export default {
  name: "ContractTypePrompt",
  dicts: ['sys_normal_disable'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 提示词列表
      promptList: [],
      // 合同类型树选项
      typeOptions: [],
      // 类型名称关键字
      typeNameKey: "",
      // 是否显示内容弹出层
      contentOpen: false,
      // 提示词内容
      promptContent: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        promptName: undefined,
        promptVersion: undefined,
        status: undefined,
        typeId: undefined
      },
      // 树形配置
      defaultProps: {
        children: "children",
        label: "typeName"
      },
      // 是否展开，默认不展开
      isExpandAll: false,
      // 重新渲染树状态
      refreshTree: true,
    };
  },
  watch: {
    // 根据名称筛选合同类型树
    typeNameKey(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getList();
    this.getTreeList();
  },
  methods: {
    /** 查询合同类型树结构 */
    getTreeList() {
      listContractType().then(response => {
        this.typeOptions = response.data;
      });
    },
    /** 查询提示词列表 */
    getList() {
      this.loading = true;
      listContractPrompt(this.queryParams).then(response => {
        this.promptList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 筛选节点 */
    filterNode(value, data) {
      if (!value) return true;
      return data.typeName.indexOf(value) !== -1;
    },
    /** 节点单击事件 */
    handleNodeClick(data) {
      this.queryParams.typeId = data.typeId;
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.typeId = undefined;
      this.handleQuery();
    },
    /** 查看内容按钮操作 */
    handleViewContent(row) {
      getPromptContent(row.promptId).then(response => {
        this.promptContent = response.data;
        this.contentOpen = true;
      });
    },
    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTree = false;
      this.isExpandAll = !this.isExpandAll;
      this.$nextTick(() => {
        this.refreshTree = true;
      });
    },
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.el-col {
  transition: width 0.3s;
}
.head-container {
  padding-right: 10px;
}
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  font-family: inherit;
}
</style>
